<template>
	<view class="payment-result" :class="themeName">

		<view class="result">
			<!-- 支付状态图片 -->
			<u-image class="status-image" :src="paymentStatus['image']" width="100" height="100" shape="circle" />
			<!-- 支付状态文字 -->
			<text class="status-text">{{ paymentStatus['text'] }}</text>

			<!-- 支付信息 -->
			<view class="result-info">
				<view class="result-info__item">
					<text>{{$zhTran('订单编号')}}</text>
					<text>{{ orderInfo.sn }}</text>
				</view>
				<view class="result-info__item">
					<text>{{$zhTran('付款时间')}}</text>
					<text>{{ orderInfo.pay_time }}</text>
				</view>
				<view class="result-info__item">
					<text>{{$zhTran('支付方式')}}</text>
					<template>
						<text>{{ orderInfo.pay_way || '-'}}</text>
					</template>
				</view>
				<view class="result-info__item">
					<text>{{$zhTran('支付状态')}}</text>
					<template v-if="orderInfo.pay_status > 0">
						<text v-if="orderInfo.pay_status == 1">{{$zhTran('已支付')}}</text>
						<text v-if="orderInfo.pay_status == 2">{{$zhTran('部分支付')}}</text>
						<text v-if="orderInfo.pay_status == 3">{{$zhTran('待支付')}}</text>
					</template>
					<template v-else>
						<text>{{$zhTran('待支付')}}</text>
					</template>
				</view>
				<view class="result-info__item">
					<text>{{$zhTran(orderInfo.pay_status == 1?'支付金额':'订单金额')}}</text>
					{{ orderInfo.total_amount }}
				</view>
			</view>

			<!-- 操作区域 -->
			<view class="operational">
				<view class="operational-button operational-button--primary" @tap="goOrder">{{$zhTran('查看订单')}}</view>
				<view class="operational-button operational-button--normal" @tap="goHome">{{$zhTran('返回首页')}}</view>
				<view class="operational-button operational-button--normal" @tap="refreshStatus"
					v-if="orderInfo.pay_status!=1">{{$zhTran('刷新支付状态')}}
				</view>
			</view>
		</view>

		<w-jishuzhichi class="jishuzhichi-nodata" />

		<!-- 页面状态 -->
		<page-status :status="pageStatus">
			<template #error>
				<u-empty :text="$zhTran('订单不存在')" mode="order"></u-empty>
			</template>
		</page-status>
	</view>
</template>


<script>
	import {
		apiPayResult
	} from '@/api/app'
	import {
		PageStatusEnum
	} from '@/utils/enum'
	import Cache from '@/utils/cache'

	export default {
		name: 'PaymentResult',

		data() {
			return {
				// 页面状态
				pageStatus: PageStatusEnum['LOADING'],
				order_id: '', // 订单ID
				orderInfo: {}, // 订单信息

				mapStatus: {
					'succeed': {
						text: this.$zhTran('订单支付成功'),
						image: this.$getImageUri('resource/image/shopapi/uniapp/payment/icon_succeed.png'),
					},
					'waiting': {
						text: this.$zhTran('订单等待支付'),
						image: this.$getImageUri('resource/image/shopapi/uniapp/payment/icon_waiting.png')
					},
					'placeSucceed': {
						text: this.$zhTran('订单下单成功'),
						image: this.$getImageUri('resource/image/shopapi/uniapp/payment/icon_succeed.png')
					},
					'waitAudit': {
						text: this.$zhTran('订单等待审核'),
						image: this.$getImageUri('resource/image/shopapi/uniapp/payment/icon_waiting.png')
					}
				},
				auditfrom: '',
				cloud_shop_enabled: Cache.get('cloud_shop_enabled')
			}
		},

		computed: {
			// 支付状态
			paymentStatus() {
				var pflag = 'waiting'
				switch (this.orderInfo.pay_status) {
					case 1:
						pflag = 'succeed'
						break
					case 3:
						pflag = 'placeSucceed'
						break
				}
				if (this.auditfrom == 1)
					pflag = 'waitAudit'
				console.log('pflag', pflag)
				return this.mapStatus[pflag]
			},
		},

		methods: {
			// 初始化页面数据
			initPageData() {
				return new Promise((resolve, reject) => {
					apiPayResult({
						order_id: this.order_id,
						from: this.from,
						auditfrom: this.auditfrom,
					}).then(data => {
						this.orderInfo = this.$zhTran(data)
						resolve(data)
					}).catch(err => {
						reject(err)
					})
				})
			},

			// 去首页
			goHome() {
				if (this.cloud_shop_enabled) {
					this.$Router.replaceAll({
						path: '/bundle2/pages/cloud_shop/diyshop/index',
						query: {
							clspId: Cache.get('clsp_id')
						}
					})
				} else {
					this.$Router.replaceAll({
						path: '/pages/index/index'
					})
				}
			},

			// 去订单
			goOrder() {
				switch (this.from) {
					case 'order':
						this.$Router.replace({
							path: '/bundle2/pages/order_list/order_list'
						})
						break
					case 'integral':
						this.$Router.replace({
							path: '/bundle/pages/exchange_order/exchange_order'
						})
						break
					case 'cgp_order':
						this.$Router.replace({
							path: '/bundle2/pages/community_group_purchase/order/order_list'
						})
						break
				}

			},
			async refreshStatus() {
				await this.initPageData()
			}
		},

		async onLoad() {
			const options = this.$Route.query
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}

			try {
				if (!options.order_id) throw new Error(this.$zhTran('订单不存在'))
				this.order_id = options.order_id
				this.auditfrom = options.auditfrom
				this.from = options.from
				await this.initPageData()
				this.pageStatus = PageStatusEnum['NORMAL']
			} catch (err) {
				console.log(err)
				this.pageStatus = PageStatusEnum['ERROR']
			}

		}
	}
</script>


<style lang="scss" scoped>
	.payment-result {
		padding: 20rpx;
	}

	.result {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 300rpx;
		margin-top: 80rpx;
		padding: 100rpx 20rpx 20rpx 20rpx;
		border-radius: 7px;
		background-color: #FFFFFF;

		.status-image {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.status-text {
			font-weight: 500;
			font-size: $-font-size-xl;
			color: $-color-black;
		}

		.result-info {
			width: 100%;
			padding: 20rpx 0;
			font-size: $-font-size-nr;
			border-bottom: $-solid-border;
			color: $-color-black;

			&__item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 70rpx;
			}
		}

		.operational {
			width: 100%;
			padding: 40rpx 0;

			&-button {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 84rpx;
				border-radius: 60px;
				font-size: $-font-size-lg;

				&:nth-child(n+2) {
					margin-top: 30rpx;
				}

				&--normal {
					@include font_color() @include border_color() border-width: 1px;
					border-style: solid;
				}

				&--primary {
					@include background_color() color: #FFFFFF;
				}
			}
		}
	}
</style>